<template>
  <el-row>
    <div class="title-box">
      <el-text class="title">历史订单</el-text>
    </div>
  </el-row>
  <el-row class="searchArea">
    <el-form label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号">
            <el-input v-model="data.carClient.orderId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button @click="driverPage" style="width: 240px" type="success">
              &nbsp;&nbsp;&nbsp;<el-icon>
              <Search/>
            </el-icon>&nbsp;&nbsp;搜索
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-row>
  <el-row>
    <div class="table-box">
      <el-table :data="data.list" border class="carTable">
        <el-table-column prop="orderId" label="订单编号" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="client" label="客户名称" width="250px"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="consignee" label="联系人" width="130px"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="consigneePhone" label="联系电话" width="250px" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="position" label="位置信息" width="130px"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="deliverTime" label="最后更新时间" width="150px"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="配送状态" width="90px"></el-table-column>
      </el-table>
      <el-row style="width: 100%; display: flex;justify-content: right">
        <el-pagination
            style="margin-top: 10px"
            v-model:current-page="data.driverPage.currentPage"
            @current-change="driverPage"
            layout="prev, pager, next"
            :page-size="5"
            :total="data.driverPage.total"
            class="carPage"
        />
      </el-row>
    </div>

  </el-row>

</template>

<script lang="ts" setup>
import {reactive, onMounted} from "vue";
import axios from "axios";
import moment from "moment/moment";
import {ElMessage} from "element-plus";

const data = reactive({
  carClient: {
    driverId: "",
    orderId: "",
    status: ""
  },
  userId: "",
  list: [],
  driverPage: {
    currentPage: 1,
    total: ""
  }
})

//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}


//获取USERId
const getUserId = () => {
  const key = sessionStorage.getItem("userId");
  if (key) {
    console.log("userId" + key);
    data.userId = key;
  } else {
    errorMessage("获取userId失败");
  }
}
//获取driverId
const getDriverId = () => {
  axios({
    url: "http://localhost:8080/driver/selectByUserId",
    method: "get",
    params: {
      userId: data.userId
    }
  }).then((res) => {
    console.log(res.data.data);
    data.carClient.driverId = res.data.data.driverId;
    console.log(data.carClient.driverId + "zzzzzzzzz")
    driverPage();
  })
}


//司机订单信息
const driverPage = () => {
  console.log("driverId" + data.carClient.driverId);
  axios({
    url: "http://localhost:8080/carClient/driverOrderAlready",
    method: "get",
    params: {
      currentPage: data.driverPage.currentPage,
      driverId: data.carClient.driverId,
      orderId: data.carClient.orderId,
      size: 5
    }
  }).then((res) => {
    data.list = res.data.data;
    data.driverPage.total = res.data.total;
  })
}

onMounted(() => {
  getUserId();
  getDriverId();
})
</script>

<style scoped>


.table-box {

  margin-left: 30px;
  margin-top: 40px;
  width: 1200px;
}


.title-box {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  border: 2px rgba(66, 61, 61, 0.89) dashed;
  background: #efedcb;
  border-radius: 30px;
}

.title {
  font-size: 40px;
  color: #6b5614;
  line-height: 100px;
  margin-left: 40px;
}


.searchArea {

  margin-top: 20px;
}
</style>